<template>
  <div class="video-list">
    <div class="video-detail">
      <img  @click="toDetail" class="video-img" src="https://i0.hdslb.com/bfs/archive/450f21ed1df1c112a8cabf4ebd1b6f0d70a69a66.jpg@640w_400h_1c_!web-space-index-myvideo.webp">
    </div>
        <div class="video-detail">
      <img class="video-img" src="https://i0.hdslb.com/bfs/archive/450f21ed1df1c112a8cabf4ebd1b6f0d70a69a66.jpg@640w_400h_1c_!web-space-index-myvideo.webp">
    </div>
        <div class="video-detail">
      <img class="video-img" src="https://i0.hdslb.com/bfs/archive/450f21ed1df1c112a8cabf4ebd1b6f0d70a69a66.jpg@640w_400h_1c_!web-space-index-myvideo.webp">
    </div>
        <div class="video-detail">
      <img class="video-img" src="https://i0.hdslb.com/bfs/archive/450f21ed1df1c112a8cabf4ebd1b6f0d70a69a66.jpg@640w_400h_1c_!web-space-index-myvideo.webp">
    </div>
        <div class="video-detail">
      <img class="video-img" src="https://i0.hdslb.com/bfs/archive/450f21ed1df1c112a8cabf4ebd1b6f0d70a69a66.jpg@640w_400h_1c_!web-space-index-myvideo.webp">
    </div>
        <div class="video-detail">
      <img class="video-img" src="https://i0.hdslb.com/bfs/archive/450f21ed1df1c112a8cabf4ebd1b6f0d70a69a66.jpg@640w_400h_1c_!web-space-index-myvideo.webp">
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoCard",
  props: {
    videoList: Array
  },
  methods: {
    toDetail: function(e) {
      this.$router.push("/projectDetail");
    }
  }
}

</script>

<style scoped>
.video-card {
  /* 容器 8 */

  width: 50%;
  /*height: 200.95px;*/
  background: #DCDCDC;
  border: 100px solid #DCDCDC;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}
.video-list {
  display: flex;
  flex-wrap: wrap;
}
.video-detail {
  width: 400px;
  height: 300px;
}
.video-img {
  width: 320px;
  height: 200px;

}
</style>